<!DOCTYPE html>
<head xmlns:v-bind="http://www.w3.org/1999/xhtml" >
    <meta charset="UTF-8">
    <title>demo13-vue组件【自定义事件】</title>
  <script src="./js/vue.min.js"></script>

</head>

<body>
   <div id="app">
    <div id="counter-event-example">
      <p>总数为:{{total}}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
   </div>

</body>

<script type="application/javascript">
  Vue.component('button-counter',{
    template: '<button v-on:click="incrementHandler">数量为{{counter}}</button>',
    data: function () {
      return {
        counter: 0
      }
    },
    methods: {
      incrementHandler: function () {
        this.counter += 2;
        this.$emit('increment');
      }
    }
  });
  var vm = new Vue({
    el: "#counter-event-example",
    data:{
      total: 0
    },
    methods: {
      incrementTotal:function () {
        this.total +=1;
      }
    }
  });


</script>
</html>
